<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class="container">
    <svg width="1500" height="800" xmlns="http://www.w3.org/2000/svg">

        <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />



        <circle class="rect" cx="0" cy="0" r="10" stroke="black"
                stroke-width="2" fill="lime" />
    </svg>
</div>


<style>
    .container {
        position: relative;
    }

    .container svg {
        background: gray;
    }

    .container svg path {
        stroke: gold;
        fill: none;
        stroke-width: 2;
    }

    @keyframes svg-path-animation {
        from {
            offset-distance: 0%;
        }

        to {
            offset-distance: 100%;
        }
    }

    .container .rect {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        background: darkred;

        offset-path: path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
        offset-distance: 0%;

        animation: svg-path-animation 2s ease-in-out 0s infinite normal none;
    }
</style>
</body>
</html>